$(function () {
    var rq = $.getRequest();
    $("#fsiteName").text(rq.name);
    chart_5();
});

/**
 * 24小时AQI
 */
function chart_5() {
    var myChart = echarts.init(document.getElementById('chart_5'));
    var option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            },
            formatter: '{b1}:<br />AQI:{c1}'//提示信息
        },
        grid: {
            left: '3%',
            right: '7%',
            top: '10%',
            bottom: '10%',
            containLabel: true
        },
        xAxis: {
            type: 'value',
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#FFFFFF',
                    fontSize: '10'
                }
            },
            splitLine: {
                show: false,
                lineStyle: {
                    color: ['red']
                }
            },
            axisLine: {
                lineStyle: {
                    color: '#FFFFFF',
                    width: 2, //这里是坐标轴的宽度,可以去掉
                }
            }
        },
        yAxis: {
            type: 'category',
            data: ['12', '11', '10', '9', '8', '7', '6', '5', '4', '3'],
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#FFFFFF'
                }
            },
            // y轴的颜色和宽度
            axisLine: {
                lineStyle: {
                    color: '#FFFFFF',
                    width: 1, //这里是坐标轴的宽度
                }
            }
        },
        series: [
            {
                type: 'bar',
                //barWidth:"4", 默认自适应
                itemStyle: {
                    normal: {
                        color: '#ddd'
                    }
                },
                silent: true,
                barGap: '-100%',//不同序列的距离
                data: [500, 500, 500, 500, 500, 500, 500, 500, 500, 500]
            },
            {
                type: 'bar',
                //barWidth:"4",
                itemStyle: {
                    normal: {
                        //根据数据显示不同颜色
                        color: function (params) {
                            var colorList = ['#00e400', '#ffff00', '#ff7e00', '#ff0000', '#99004c', '#7e0023'];
                            var color;
                            var num = params.value;
                            if (num <= 50) {
                                color = colorList[0];
                            } else if (num <= 100) {
                                color = colorList[1];
                            } else if (num <= 150) {
                                color = colorList[2];
                            } else if (num <= 200) {
                                color = colorList[3];
                            } else if (num <= 300) {
                                color = colorList[4];
                            } else {
                                color = colorList[5];
                            }
                            return color;
                        }
                    }
                },
                label: {
                    normal: {
                        show: true,
                        position: 'inside'//文本显示位置
                    }
                },
                data: [100, 200, 400, 60, 80, 30, 70, 65, 200, 40]
            }]
    };

    myChart.setOption(option);
}